<template>
  <div id="addFrend">
    <div class="header_js">添加好友</div>
    <div class="conbox_js">
      <el-form label-width="60px" size="mini">
        <el-form-item label="好友">
          <el-input v-model="name" placeholder="请输入好友昵称"></el-input>
        </el-form-item>
        <el-form-item label="邮箱">
          <el-input v-model="email" placeholder="请输入邮箱地址"></el-input>
        </el-form-item>
        <el-form-item label="性别">
          <el-radio-group v-model="sex">
            <el-radio :label="1">男</el-radio>
            <el-radio :label="0">女</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="findUser()">查询</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="listbox_js" v-if="listdata.length>0">
      <ul>
        <li v-for="(item,index) in listdata" :key="index">
          <img :src="imgurl+item.imgurl" alt="头像" />
          <div class="dis">
            <h4>{{item.name}}</h4>
            <el-button type="primary" size="mini" icon="el-icon-plus" @click="addFrend(item)">好友</el-button>
          </div>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import { commonMixin } from "../config/mixin";
import { mapGetters, mapActions } from "vuex";
import serverUrl from "../config/client";
import API from "../api/api";
export default {
  name: "addFrend",
  mixins: [commonMixin],
  components: {},
  data() {
    return {
      name: "", //好友名称
      sex: 1,
      email: "",
      listdata: [], //查询的好友列表
      imgurl: "",
      friendId: "" //好友id
    };
  },
  created() {
    this.imgurl = serverUrl;
    // debugger;
  },
  computed: {
    ...mapGetters(["getuserInfo"])
  },
  methods: {
    //查询好友列表
    async findUser() {
      var name = this.name;
      var sex = this.sex;
      var email = this.email;
      var result = await API.findUser({
        name,
        sex,
        email
      });
      if (result.status == 200) {
        this.listdata = result.data;
      }
    },
    //添加好友
    async addFrend(item) {
      var friendID = item.id;
      var userID = this.getuserInfo.id;

      var reslut = await API.addFrend({
        friendID,
        userID
      });
      if (reslut.status == 200) {
        this.$message({
          type: "success",
          message: "添加成功"
        });
      } else {
        this.$message({
          type: "warning",
          message: reslut.msg
        });
      }
    }
  }
};
</script>
<style lang='scss' scoped >
#addFrend {
  .header_js {
    font-size: 18px;
    line-height: 36px;
    text-align: center;
  }
  .conbox_js {
    padding-right: 20px;
  }

  .listbox_js {
    ul {
      list-style: none;
      padding-left: 0;
      li {
        padding: 10px 0;
        width: 24%;
        display: inline-block;
        text-align: center;
        img {
          width: 60px;
          height: 60px;
          border-radius: 30px;
          vertical-align: middle;
        }
        .dis {
          vertical-align: middle;
          display: inline-block;
          h4 {
            color: #333;
            font-size: 16px;
            margin: 0;
            padding: 10px 0;
            max-width: 80px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
          }
        }
      }
    }
  }
}
</style>
